<template>
  <div>
    <div class="main_label">
      <span>销售数据（{{salesTabVal==1?'认购':'签约'}}）</span>
    </div>
    <Tabs v-model="salesTabVal" :animated="false" type="line" name='salesTab'
      @on-click='changeTabs'>
      <TabPane label="认购" name="1" tab='salesTab'></TabPane>
      <TabPane label="签约" name="2" tab='salesTab'></TabPane>
      <template #extra>
        <span @click="checkChart('4')" class="check_chart" v-if="hasShow">
          <Icon type="md-stats" />查看完整图表</span>
        <span @click="changeMode('-1')" class="check_chart" v-else>立即维护</span>
      </template>
    </Tabs>
    <div style="height: 250px">
      <chart-block ref="salesChart"></chart-block>
    </div>
  </div>
</template>

<script>
  import chartBlock from '@/components/echarts/eChartsBlock.vue'
  import chartsOption from '@/biz/buildingHome/charOption'
  import dailyChartsApi from '@/biz/buildingHome/dailyCharts'
  import dailyApi from '@/biz/buildingHome/home'

  export default {
    components: {
      chartBlock
    },
    data() {
      return {
        salesTabVal: '1',
        odlTabVal: '1',
        hasShow: false,
        infoData: {}
      }
    },
    methods: {
      checkChart(type) {
        console.log(type)
        this.$emit('handelClick', { type })
      },
      changeMode(type) {
        this.$emit('changeMode', type)
      },
      changeTabs(val) {
        if (this.odlTabVal == val) return false
        this.odlTabVal = val

        this.getinfoData(this.infoData)
      },
      getinfoData(data) {
        this.$refs.salesChart.showLoading()
        let option = null
        let list = []
        let filterList = []
        this.infoData = data
        this.hasShow = data.templateAllList[3].hasShow
        let subscribelist = [{ name: '认购' }, { name: '实际净认购' }, { name: '足未签' }]
        let contractList = [{ name: '签约' }, { name: '净签约' }, { name: '已全款' }]
        data.templateAllList[3].childModelConfig.forEach(item => {
          if (this.salesTabVal == 1) { //认购
            subscribelist.forEach((itemC) => {
              if ((item.dailyConfigShortName == itemC.name) && item.hasLock) {
                list.push(itemC)
              }
            })
          }
          if (this.salesTabVal == 2) { //签约
            contractList.forEach((itemC) => {
              if ((item.dailyConfigShortName == itemC.name) && item.hasLock) {
                list.push(itemC)
              }
            })
          }
          item.name = item.dailyConfigShortName
        })
        list.map(item => {
          filterList.push(item.name)
        })
        if (!this.hasShow) {
          let text = dailyChartsApi.noDataTxt(2)
          option = chartsOption.noData(text)
          this.$refs.salesChart.setOption(option)
        } else {
          let params = {
            type: 'optionBar',
            checkTime: dailyApi.resovleTime(5, data.currentDate),
            chartsType: '4',
            filterData: filterList,
            TabVal: this.salesTabVal,
            unit: '套',
            page_type: 'list'
          }
          dailyChartsApi.getInfoData(params).then((res) => {
            option = res.option
            this.$refs.salesChart.setOption(option)
          })
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
  .main_label {
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    border-left: 5px solid #2b85e4;
    padding-left: 8px;
    font-size: 15px;
    margin-bottom: 15px;

    .delete_btn {
      color: #2d8cf0;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
    }
  }

  .check_chart {
    line-height: 36px;
    color: #2b85e4;
    margin-right: 20px;
    cursor: pointer;
  }
</style>